<template>
    <div class="preview-img">
        <img :src="src" alt="" @click="show = true">
        <modal v-model="show" :width="700" :closable="false">
            <div slot="header" v-if="false"></div>
            <div>
                <img :src="src" alt="" style="width: 100%;">
            </div>
            <div slot="footer">
                <Button size="large" long @click="show = false">关闭</Button>
            </div>
        </modal>
    </div>
</template>

<script>
    export default {
        name: "preview-img",
        props: {
            src: String
        },
        data() {
            return {
                show: false
            }
        }
    }
</script>

<style lang="scss">
    .preview-img {
        cursor: pointer;
        display: inline-block;
        img {
            display: block;
            max-width: 100%;
        }
    }
</style>
